<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav flex-justify-start">
      <span @click="fn.goHome()" class="mui-action-back"><img class="back-btn" src="../../../../static/images/back.png"></span>
      <h1 class="mui-title">记录统计</h1>
    </header>
    <div id="slider" class="mui-slider mui-fullscreen">
      <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="mui-scroll meeting-tab">
          <cube-scroll-nav-bar :current="current" :txts="txts" :labels="labels" @change="changeHandler" >
            <span class="mui-control-item" slot-scope="props" @click="clickNav(props.index)">{{props.txt}}</span>
          </cube-scroll-nav-bar>
        </div>
      </div>
      <div class="mui-slider-group">
        <!-- ---------支部党员大会---------start -->
        <div id="memberMeeting" class="mui-slider-item mui-control-content mui-active">
          <div id="scroll1" class="mui-scroll-wrapper">
            <div class="mui-scroll record-member-lists">
              <!-- 时间选择 -->
              <div class="time-line flex-center">
                <div class="message-line"></div>
                <div @click="showTimePicker()" class="year-btn flex-center">
                  <span>{{year}}</span>年
                  <img class="arrow_icon" src="../../../../static/images/select_down.png">
                </div>
                <div class="message-line"></div>
              </div>
              <!-- 标题 -->
              <div class="work-message-item-header">
                <h3>{{list[curNavIndex].name}}记录</h3>
              </div>
              <!-- 列表 -->
              <ul class="mui-table-view" style="margin-bottom:60px;">
                <li class="mui-table-view-cell" v-for="item in swipeData" @click="go('recordList', item)">
                  <a  href="javascript:void(0)">
                    <div class="mine-lists-content flex-between-center">
                      <div class="statistics-lists">
                        <h2 class="organization-lists-title">{{item.partyGroupName}}</h2>
                        <div class="organization-lists-time"><span>应开展次数：<b>{{item.shouldCount}}</b>次，已开展次数：<b>{{item.alreadyCount || 0}}</b>次</span></div>
                      </div>
                      <div class="flex-center">
                        <p>{{fn.percent(item.alreadyCount,item.shouldCount)}}%</p>
                        <span class="mui-icon mui-icon-arrowright"></span>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- ---------支部党员大会---------end -->
      </div>
    </div>
  <footerbar></footerbar>
  </div>
</template>

<script>
  import footerbar from '../common/footerbar.vue'
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  export default {
    components: {
      footerbar
    },
    name: '',
    data () {
      return {
        fn: tools,
        list: [],
        datePicker: '',
        current: 0,
        curNavIndex: 0,
        txts: [],
        labels: [],
        pageIndex: 0,
        year: new Date().getFullYear(),
        typeId: '',
        swipeData: []
      }
    },
    created () {
      this.appGetMeetingType()
    },
    methods: {
      go (name, item) {
        this.$store.state.recordListData = item
        this.$localStorage.set('statisticsPartyId', item.partyGroupId)
        this.$router.push({name: name})
      },
      changeHandler (cur) {
        this.current = cur
        this.refresh = new Date().getTime()
      },
      clickNav (index) {
        this.curNavIndex = this.$store.state.statisticsIndex = index
        this.typeId = this.list[index].value
        this.loadData()
      },
      showTimePicker () {
        if (!this.datePicker) {
          let me = this
          let nowYear = new Date().getFullYear()
          this.datePicker = this.$createDatePicker({
            columnCount: 1,
            min: new Date(nowYear - 10, 1, 1),
            max: new Date(nowYear + 1, 1, 1),
            value: new Date(me.year, 1, 1),
            onSelect: (selectedTime, selectedText, formatedTime) => {
              this.year = new Date(selectedTime).getFullYear()
              this.loadData()
            }
          })
        }
        this.datePicker.show()
        setTimeout(() => {
          this.datePicker.$updateProps({
            value: new Date(this.year, 1, 1)
          })
        }, 1000)
      },
      // 会议类型
      appGetMeetingType () {
        loginService.appGetMeetingType().then((res) => {
          if (res.code === 200) {
            let currentIndex = 0
            this.list = res.data
            let arrListLable = []
            let arrListText = []
            this.list.forEach((v, index) => {
              arrListLable.push((index + 1) + v.name)
              arrListText.push(v.name)
            })
            this.labels = arrListLable
            this.txts = arrListText
            setTimeout(() => {
              this.clickNav(currentIndex)
              this.current = arrListLable[currentIndex]
            }, 0)
          }
        })
      },
      loadData () {
        let str = `{'meetTime':'{year:${this.year}}','type':'${this.typeId}'}`
        let data = {
//          year: this.year + '',
          params: str,
          pageIndex: this.pageIndex,
          pageSize: '1000'
        }
        loginService.getPartyMeetPlans(this.year, this.pageIndex, this.typeId, 1000).then((res) => {
          if (res.code === 200 && res.data.length < 1) {
//            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate()
            tools.tip('已无更多数据')
          }
          this.swipeData = res.data
          setTimeout(() => {
//            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
//            this.options.isPullUpLoad = false
          }, 100)
        })
      }
    }
  }
</script>

<style scoped lang="">

</style>
